<template>
	<view>
		<page-head headTitle="南宁市" :user="true" :glide="true" :news="true" :code="true"
		 @clickLeftUser="clickLeftUser" @clickGlide="clickCity" @clickRightNews="clickRightNews" @clickRightCode="clickRightCode"></page-head>
		 <view class="m-t9">
			 <view class="scan-mt bg-pic">
			 	<view class="flex p-t-b4">
			 		<view class="flex-1">
			 			<view class="flex justify-content font-weight index-font">34</view>
			 			<text class="flex justify-content">线上商品</text>
			 		</view>
			 		<view class="flex-1">
			 			<view class="flex justify-content font-weight index-font">34</view>
			 			<text class="flex justify-content">今日订单</text>
			 		</view>
			 		<view class="flex-1">
			 			<view class="flex justify-content font-weight index-font">34</view>
			 			<text class="flex justify-content">订单人数</text>
			 		</view>
			 	</view>
			 </view>
			 <view class="index-content bg-white p-t5">
				 <view class="flex align-center p-left p-right">
					 <image src="/static/images/grab-sheet.png" class="grab-sheet">
					 <text class="fs-32 font-weight ml-2">抢单大厅</text>
				 </view>
				 <swiper class="p-l-r" style="height: 580rpx;" indicator-active-color="#FFEB10" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
					 <swiper-item>
						<view class="m-t-2 ml-2 m-r1">
							<view class="flex fs-3 p-l3 p-b2 color-c justify-between dotted-line border-r index-border">
								<view class="flex p-t-3">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow ml-2 m-r1" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>03.15</text>
										<text class="p-l2 p-r2 input-goods">至</text>
										<text>03.18</text>
									</view>
								</view>
								<view class="index-stay fs-2">待接单</view>
							</view>
							<view class="p-l3 border-r2 index-border2 p-b2">
								<view class="flex align-center p-t-3">
									<text>人均预算</text>
									<text class="fs-24 input-goods ml">无限制</text>
								</view>
								<view class="flex align-center p-t-3">
									<text>服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务</text>
									<view class="service-options flex flex-wrap ml">
										<view class="m-r1 p-t1 personal-active"><text>玩法设计</text></view>
										<view class="m-r1 p-t1 personal-active"><text>导游</text></view>
										<view class="m-r1 p-t1 personal-active"><text>用车</text></view>
									</view>
								</view>
								<view class="flex align-center p-t-3">
									<text>其他需求</text>
									<text class="fs-24 input-goods ml flex-1">详细需求描述详细需求描述详细需求描述详细需求描述详细需求描述求描述详细需求描述详细需求描</text>
								</view>
							</view>
						</view>
					 </swiper-item>
					 <swiper-item>
						<view class="m-t-2 ml-2 m-r1">
							<view class="flex fs-3 p-l3 p-b2 color-c justify-between dotted-line border-r index-border">
								<view class="flex p-t-3">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow ml-2 m-r1" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>03.15</text>
										<text class="p-l2 p-r2 input-goods">至</text>
										<text>03.18</text>
									</view>
								</view>
								<view class="index-stay fs-2">待接单</view>
							</view>
							<view class="p-l3 border-r2 index-border2 p-b2">
								<view class="flex align-center p-t-3">
									<text>人均预算</text>
									<text class="fs-24 input-goods ml">无限制</text>
								</view>
								<view class="flex align-center p-t-3">
									<text>服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务</text>
									<view class="service-options flex flex-wrap ml">
										<view class="m-r1 p-t1 personal-active"><text>玩法设计</text></view>
										<view class="m-r1 p-t1 personal-active"><text>导游</text></view>
										<view class="m-r1 p-t1 personal-active"><text>用车</text></view>
									</view>
								</view>
								<view class="flex align-center p-t-3">
									<text>其他需求</text>
									<text class="fs-24 input-goods ml flex-1">详细需求描述详细需求描述详细需求描述详细需求描述详细需求描述求描述详细需求描述详细需求描</text>
								</view>
							</view>
						</view>
					 </swiper-item>
					 <swiper-item>
						<view class="m-t-2 ml-2 m-r1">
							<view class="flex fs-3 p-l3 p-b2 color-c justify-between dotted-line border-r index-border">
								<view class="flex p-t-3">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow ml-2 m-r1" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>03.15</text>
										<text class="p-l2 p-r2 input-goods">至</text>
										<text>03.18</text>
									</view>
								</view>
								<view class="index-stay fs-2">待接单</view>
							</view>
							<view class="p-l3 border-r2 index-border2 p-b2">
								<view class="flex align-center p-t-3">
									<text>人均预算</text>
									<text class="fs-24 input-goods ml">无限制</text>
								</view>
								<view class="flex align-center p-t-3">
									<text>服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务</text>
									<view class="service-options flex flex-wrap ml">
										<view class="m-r1 p-t1 personal-active"><text>玩法设计</text></view>
										<view class="m-r1 p-t1 personal-active"><text>导游</text></view>
										<view class="m-r1 p-t1 personal-active"><text>用车</text></view>
									</view>
								</view>
								<view class="flex align-center p-t-3">
									<text>其他需求</text>
									<text class="fs-24 input-goods ml flex-1">详细需求描述详细需求描述详细需求描述详细需求描述详细需求描述求描述详细需求描述详细需求描</text>
								</view>
							</view>
						</view>
					 </swiper-item>
				 </swiper>
				 
				 <view class="flex justify-content m-t12">
					<navigator>
						<image src="/static/images/rob.png" class="grab-sheet-img">
					</navigator> 
				 </view>
				 <view class="flex m-t3 justify-content">
					<button class="rest-button fs-g">休息</button>
				 </view>
			 </view>
		 </view>
		 <!-- 点击头像弹框 -->
		 <view v-show="isShow">
		 	<view class="cancel-bj fixed fixed-top" @click="clickLeftHide"></view>
		 	<view class="left-width bg-white fixed fixed-top">
		 		<head-pic name="妮子" :atte="true" :icon="true" image="/static/images/picture.png"></head-pic>
		 		<view class="m-t7 p-l4">
		 			<navigator>
						<head-list listName="订单" imageList="/static/images/order.png"></head-list>
					</navigator>
					<navigator>
						<head-list listName="钱包" imageList="/static/images/wallet.png"></head-list>
					</navigator>
					<navigator>
						<head-list listName="商品" imageList="/static/images/commodity-pic.png"></head-list>
					</navigator>
					<navigator url="../invite-friends/invite-friends">
						<head-list listName="邀请好友" imageList="/static/images/invite-friends.png"></head-list>
					</navigator>
					<navigator>
						<head-list listName="设置" imageList="/static/images/setup.png"></head-list>
					</navigator>
		 		</view>
		 	</view>
		 </view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import headPic from '@/components/common/head-pic.vue'
import headList from '@/components/common/head-list.vue'
	export default {
		components:{
			pageHead,
			headPic,
			headList
		},
		data() {
			return {
				isShow:false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				
			}
		},
		onLoad() {

		},
		methods: {
			//用户头像
			clickLeftUser(){
				this.isShow = true;
			},
			//切换城市
			clickCity(){
				
			},
			//消息中心
			clickRightNews(){
				uni.navigateTo({
				    url: '../../user/news-core/news-core'
				});
			},
			//二维码
			clickRightCode(){
				
			},
			clickLeftHide(){
				this.isShow = false;
			}

		}
	}
</script>

<style scoped>
page{background-color: #FFFFFF;}
.personal-active text{width: 120rpx;height: 44rpx;display: inline-block; background-color: #fff5ee;border: 2rpx solid #ff802e;color: #ff802e;text-align: center;line-height: 1.5;}
.index-border{box-shadow:0rpx -10rpx 30rpx 4rpx rgba(221,221,221,0.3);}
.index-border2{box-shadow:0rpx 10rpx 30rpx 4rpx rgba(221,221,221,0.3);}
.grab-sheet{width: 27rpx;height: 34rpx;}
.index-content{margin-top: -90rpx;border-radius: 60rpx 60rpx 0 0;}
.index-stay{background-color: #3baeff;border-radius: 4rpx 18rpx 4rpx 4rpx;color: #FFFFFF;padding: 0 10rpx; height: 48rpx;}
.dotted-line{border-bottom: 2rpx dashed #e6e6e6;}
.grab-sheet-img{width: 182rpx;height: 182rpx;}
.rest-button{width: 200rpx;height: 80rpx;background-color: #FFFFFF;line-height: 2.2;border: 2rpx solid #999999;}
</style>
